<template>
<div>
  <div class="proj-info">
    <span class="float-top-right" :style="{backgroundColor: projectInfo.tagColor}"></span>
    <h2>{{projectInfo.name}}</h2>
    {{{projectInfo.summary}}}<br />
    <b>{{projectInfo.createdBy}} - {{projectInfo.createdTime}}</b>
  </div>
  <div class="task-list">
    <task v-for="task in tasks" :data="task" :index="$index" v-if="task.hide === '0'"></task>
    <button title="Add New Task" class="task btn btn-default" @click="addTask('0')" style="margin-left: 5%;">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <br />
    <button id="refresh-btn" class="task btn btn-default" @click="refresh()" style="margin-left: 5%; margin-top: 20px;">
      <span class="glyphicon glyphicon-refresh"></span>
    </button>
  </div>

  <div class="modal fade" id="taskInfo" tabindex="-1" role="dialog" aria-labelledby="taskModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="taskModal">{{modalType === 'add' ? 'Add Task' : 'Edit Task'}}</h4>
        </div>
        <div class="modal-body">
          <label>Task Hash:</label>
          <p>{{modalItem.hash}}</p>
          <label>Task Status:</label>
          <p>Finished: {{modalItem.finished}}</p>
          <label for="modal-task-name">Task name:</label>
          <input id="modal-task-name" class="form-control" type="input" placeholder="Project name here..." v-model="modalItem.name" />
          <label for="modal-task-color">Tag color:</label>
          <input id="modal-task-color" class="form-control" type="input"
            placeholder="This attr will be the css `background-color` attr" v-model="modalItem.tagColor" />
          <label for="modal-task-detail">Task Detail:</label>
          <textarea id="modal-task-detail" class="form-control" cols="10"
            placeholder="Task detail here..." v-model="modalItem.detail"></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" @click="modalCommit">Commit</button>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
/* global alert, $ */
import config from '../config'
export default {
  route: {
    data (transition) {
      config.ensureLogin(this.$root)
      this.refresh(transition)
      document.title = 'Task List - ' + config.title
    }
  },
  data () {
    return {
      tasks: {},
      modalType: 'add',
      modalItem: {},
      parentTaskHash: '0',
      projectInfo: {},
      editingVm: {}
    }
  },
  methods: {
    addTask (hash) {
      this.$set('modalType', 'add')
      this.$set('modalItem', {
        hash: '[auto]',
        finished: '0',
        name: 'New Task',
        tagColor: '',
        detail: ''
      })
      this.$set('parentTaskHash', hash)
      $('#taskInfo').modal('show')
    },
    editTask (vm) {
      this.$set('modalItem', config.cloneItem(vm.data))
      this.$set('modalType', 'edit')
      this.$set('editingVm', vm)
      $('#taskInfo').modal('show')
    },
    modalCommit () {
      switch (this.modalType) {
        case 'add':
          this.$http.post(config.apiPath + '/project/' + this.$route.params.projectHash +
            '/task/' + this.parentTaskHash, this.modalItem, {
              credentials: true,
              emulateJSON: true
            }).then((response) => {
              console.log(response)
              // insert into tree
              // now we just refresh...
              this.refresh()
            }, (response) => {
              console.log(response)
              alert('error ' + response.status + '\n' + response.body)
            })
          break
        case 'edit':
          this.$http.patch(config.apiPath + '/project/' + this.$route.params.projectHash +
            '/task/' + this.modalItem.hash, this.modalItem, {
              credentials: true,
              emulateJSON: true
            }).then((response) => {
              console.log(response)
              // Do not know why this make "detailed" to false
              // this.$set('tasks[' + this.editingIndex + ']', response.data)
              // So I use vm instanse to set the data directly
              this.editingVm.$set('data', response.data)
            }, (response) => {
              console.log(response)
              alert('error' + response.status + '\n' + response.body)
            })
          break
        default:
          alert('Unknown modal type! Please contact admin.')
          return
      }
      $('#taskInfo').modal('hide')
    },
    refresh (transition) {
      $('#refresh-btn').prop('disabled', true)
      setTimeout(() => {
        $('#refresh-btn').prop('disabled', false)
      }, 3000)
      this.$http.get(config.apiPath + '/project/' + this.$route.params.projectHash + '/tasks', {credentials: true}).then((response1) => {
        console.log(response1)
        this.$http.get(config.apiPath + '/project/' + this.$route.params.projectHash, {credentials: true}).then((response) => {
          console.log(response)
          if (!transition) {
            this.$set('tasks', response1.data)
            this.$set('projectInfo', response.data)
          } else {
            transition.next({
              tasks: response1.data,
              projectInfo: response.data
            })
          }
        }, (response) => {
          console.log(response)
          alert('error ' + response.status + '\n' + response.body)
        })
      }, (response) => {
        console.log(response)
        alert('error ' + response.status + '\n' + response.body)
      })
    }
  }
}
</script>

<style>
@media (max-width: 500px) {
  .task {
    width: 300px;
  }

  .task-list {
    width: 100%;
    margin-left: 0px;
  }

  .task-title {
    font-size: .9em;
  }
}

@media (min-width: 501px) {
  .task {
    width: 100%;
    overflow: hidden;
  }

  .task-list {
    width: 70%;
    margin-left: 15%;
  }
}

.proj-info {
  position: relative;
  width: 50%;
  margin-left: 25%;
  text-align: center;
  margin-bottom: 30px;
}
</style>
